<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script src="/static/js/dev.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--bootstrap插件-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
	<!--字体插件-->
	<link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
	<link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
	<!--ztree-->
	<link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
	<!--common-->
	<link href="/static/css/common.css" rel="stylesheet"/>
	<!--帮助手册样式-->
	<link rel="stylesheet" type="text/css" href="/static/css/help/document.css">
	<!--代码高亮-->
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCoreDefault.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shThemeDefault.css"/>
	<title>jo-page-view</title>
<script>

</script>
</head>

<body style="padding:5px 10px; box-sizing:border-box; background-color:white;">
	<a href="#" target="_blank" class="showAtTop">显示单页</a>
	<table class="docTable">
		<tr class="docTitle">
			<td colspan="2">
				<i class="fa fa-caret-down"> </i>joView&nbsp;&nbsp;&nbsp;&nbsp;视图页面对象
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<p>视图页对象joView，封装了包括布局、按钮权限、多条件查询、Grid快速配置、智能分页、多种自定义接口等功能。</p>

			</td>
		</tr>
	</table>
	<table class="docTable">
		<tr class="docTitle">
			<td colspan="2">
				<i class="fa fa-caret-down"> </i>托管函数
			</td>
		</tr>
		<tr>
			<td><iFunc/>joView.setGridHead()</td>
			<td>设置Grid标题</td>
		</tr>
		<tr>
			<td><iFunc/>joView.setGridData(oList)</td>
			<td>设置Grid数据</td>
		</tr>
		<tr>
			<td><iFunc/>joView.handleItemValue(sVal,iIndex)</td>
			<td>加工Grid中每个小格显示的值（推荐使用handleItem代替此方法）</td>
		</tr>
		<tr>
			<td><iFunc/>joView.handleItem(oItem,iIndex)</td>
			<td>处理Grid中的行对象(可以取代接管函数3)</td>
		</tr>

		<tr>
			<td><iFunc/>joView.setGridDataBefore(oList)</td>
			<td>生成数据行的前置处理</td>
		</tr>
		<tr>
			<td><iFunc/>joView.setGridDataAfter(oList)</td>
			<td>生成数据行的后置处理</td>
		</tr>
		<tr>
			<td><iFunc/>joView.clickItem(id)</td>
			<td>数据行的点击事件(参数为主键值)</td>
		</tr>
		<tr>
			<td><iFunc/>joView.delSuccessOver(result, idStr)</td>
			<td>删除操作成功结束后的回调(参数1为后台返回的结果,参数2为删除的编号集)</td>
		</tr>
	</table>
<table class="docTable">
	<tr class="docTitle">
		<td colspan="2"><i class="fa fa-caret-down"> </i>属性（joView初始化的时候通过传参来设置joView相关特性）</td>
	</tr>
	
	<tr>
		<td><attr><obj/>joView.params</attr></td>
		<td>
			用于存放视图对象核心参数,主要参数有:
			<br/><attr><string/>transferParam</attr> 向表单页传参
			<br/><attr><arr/>pageSizeArr</attr> 每页多少条选择集合,默认为[10,25,50,75,100]
			<br/><attr><string/>JS_table</attr> Grid特效,已停用
			<br/><attr><int/>currentPage</attr> 当前页,默认第一页
			<br/><attr><int/>pageSize</attr> 每页多少条
			<br/><attr><string/>url</attr> 分页查询url
			<br/><attr><obj/>formData</attr> 分页查询参数(查询表单中的参数,初始化时通常不对此属性赋值)
			<br/><attr><string/>condition</attr> 分页查询条件(自定义查询条件key=value形式)
			<br/><attr><obj/>colsInfo</attr> 展示列表的列信息(名称,值,宽度等)；内部属性
			<br/><attr><string/>checkStyle</attr> 选择框样式,checkBox:多选框|radio:单选框|order:序号|none:没有选择框
			<br/><attr><string/>checkStyleWidth</attr> 选择框宽度,默认5%
			<br/><attr><string/>PKName</attr> 主键,默认为ID
			<br/><attr><string/>formUrl</attr> [新增/修改]表单地址
			<br/><attr><string/>deleteUrl</attr> [删除]数据的url
			<br/><attr><string/>dataUrl</attr> [Grid数据]的url
			<br/><attr><obj/>grid</attr> grid表格jq对象	2017-06-16新增参数

			<br/><attr><string/>formWidth</attr> 表单窗口的宽度,默认780px,2018-03-05新加参数
			<br/><attr><string/>formHeight</attr> 表单窗口的高度,默认80%,2018-03-05新加参数
			<br/><attr><string/>winTitleOfAdd</attr> 新增弹窗的标题,默认为'新增',2018-03-05新加参数
			<br/><attr><string/>winTitleOfUpdate</attr> 修改弹窗的标题,默认为'编辑',2018-03-05新加参数
			<br/><attr><string/>winNameOfAdd</attr> 新增弹窗的name,2018-03-05新加参数
			<br/><attr><string/>winNameOfUpdate</attr> 修改弹窗的name,2018-03-05新加参数
			<br/><attr><string/>orderBy</attr> 排序字段,2018-04-25新加参数
			<br/><attr><string/>orderType</attr> 排序类型,asc:升序|desc:降序,2018-04-25新加参数
			<br/><attr><string/>winRender</attr> 表单窗口打开位置,top:顶部窗口|parent:父窗口|self:本窗口(默认),2018-07-12新加参数
			<br/><attr><boolean/>autoLoad</attr> 页面初始化后表格自动加载，默认为true
		</td>
	</tr>
	<tr>
		<td><attr><boolean/>joView.inited</attr></td>
		<td>标记joView对象是否发生初始化,即是否有使用</td>
	</tr>
	<tr>
		<td><attr><obj/>joView.grid</attr></td>
		<td>
			数据表格的jq对象
		</td>
	</tr>
	<tr>
		<td><attr><obj/>joView.Grid</attr></td>
		<td>
			数据表格对象格式化后的Grid对象(**仅供内部方法使用,禁止外部调用)
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>方法
		</td>
	</tr>
	<tr>
		<td><func><void/>joView.initGrid(oGrid)</func></td>
		<td>初始化Grid对象,供内部使用</td>
	</tr>
	<tr>
		<td><func><void/>joView.setTransferParam(sParam)</func></td>
		<td>设置打开表单页时的传输参数,可以使用此方法在新增或编辑时通过URL方式传到表单页</td>
	</tr>
	<tr>
		<td><func><void/>joView.putParam(key, value)</func></td>
		<td>参数设置,该方法有2个参数,参数1为key,参数2为value</td>
	</tr>
	<tr>
		<td><func><void/>joView.putParams(oParams)</func></td>
		<td>批量参数设置,参数为{key:value}形式的对象</td>
	</tr>
	<tr>
		<td><func><void/>joView.putQueryParam(key, value)</func></td>
		<td>设置查询参数，场景举例：点击左侧单位树节点，查询对应节点下的用户，就需要在树节点点击事件中通过此方法设置查询参数，并调用joView.select()进行查询</td>
	</tr>
	<tr>
		<td><func><void/>joView.setQueryParam(queryParams)</func></td>
		<td>替换查询参数,适用于完全替换原有的参数;和上面的putQueryParam根据场景区别使用</td>
	</tr>
	<tr>
		<td><func><void/>joView.init(oParams)</func></td>
		<td>
			joView初始化,参数为{key:value}形式,该方法一般在页面渲染结束后调用,主要分为以下几步:
			<br/>1.初始化核心参数;
			<br/>2.格式化样式;
			<br/>3.调用joView.select初始化表格数据;
			<br/>示例:<code>joView.init({grid:$("#mainList"),PKName:"id"});</code>
		</td>
	</tr>
	<tr>
		<td><func><void/>joView.select()</func></td>
		<td>joView数据查询入口</td>
	</tr>
	<tr>
		<td><func><void/>joView.goPage(goPage)</func></td>
		<td>切换到第几页,这里不对查询参数做调整,调用select()方法才会对查询参数做重新计算
			<br/>该方法是对joView.loadData的简化,通常在调用该方法前将需要设置的参数赋值给joView.params</td>
	</tr>
	<tr>
		<td><func><void/>joView.loadData(url,formData,goPage,pageSize)</func></td>
		<td>joView数据加载核心处理函数,负责组织查询条件并发起数据查询请求,调用joView.showData展示数据并处理分页;</td>
	</tr>

	<tr>
		<td><func><void/>joView.clearGrid()</func></td>
		<td>清空表格数据</td>
	</tr>
	<tr>
		<td><func><void/>joView.showData(oList, oResult)</func></td>
		<td>表格数据显示核心处理函数,提供如下托管函数:
			<br/><iFunc>joView.setGridDataBefore</iFunc> 生成表格数据的前置处理,参数为查询到的数据
			<br/><iFunc>joView.setGridData</iFunc> 数据行生成托管函数,有默认实现,一般不需要实现,参数为查询到的数据
			<br/><iFunc>joView.handleItem</iFunc> 数据行生成前的自定义处理,参数1为后台返回的该行的json数据,参数2为数据行的索引(不计算标题行,从0开始)
			<br/><iFunc>joView.setGridDataAfter</iFunc> 生成表格数据的后置处理,参数为查询到的数据
		</td>
	</tr>
	<tr>
		<td><func><void/>joView.showPageInfo(result)</func></td>
		<td>页面智能分页信息展示;如果有自己特定的分页，覆盖此方法</td>
	</tr>
	<tr>
		<td><func><void/>joView.reloadCurrentPage()</func></td>
		<td>重新加载当前页</td>
	</tr>
	<tr>
		<td><func><void/>joView.initGridHead()</func></td>
		<td>初始化Grid标题行
			<br/><iFunc>joView.setGridHead</iFunc> 生成表格头接管函数
		</td>
	</tr>
	<tr>
		<td><func><void/>joView.add()</func></td>
		<td>joView提供的用于打开新增页面的方法</td>
	</tr>
	<tr>
		<td><func><void/>joView.del()</func></td>
		<td>joView提供的用于删除数据的公共实现,设置deleteUrl参数后生效</td>
	</tr>
	<tr>
		<td><func><void/>joView.edit()</func></td>
		<td>joView提供的用于打开编辑页面的方法
			<br/><iFunc>joView.clickItem(id,obj)</iFunc> 行点击事件托管函数，参数1为主键值，参数2为当前行数据对象
		</td>
	</tr>

</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>&lt;table/> 属性
		</td>
	</tr>
	<tr>
		<td><attr><string/>dataurl</attr></td>
		<td>
			数据源地址
		</td>
	</tr>
	<tr>
		<td><attr><string/>deleteurl</attr></td>
		<td>
			删除地址
		</td>
	</tr>
	<tr>
		<td><attr><string/>formurl</attr></td>
		<td>
			新增/编辑表单地址
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>&lt;col/>标签属性
		</td>
	</tr>
	<tr>
		<td><attr><string/>field</attr></td>
		<td>
			该列对应的字段
			<br><err>可以是joView允许的表达式,例如:</err>
			<br>1.<code>[=jo.formatTime({createTime})]</code> 通过[=]的方式来调用js方法
			<br>2.<code>{createTime}</code> "{xx}"这种格式表示该行数据的xx属性值
			<br>3.<code>时间:{createTime}</code> 文字+{xx} 这种格式表示在xx属性前面追加文字
		</td>
	</tr>
	<tr>
		<td><attr><string/>title</attr></td>
		<td>
			标题名称
		</td>
	</tr>
	<tr>
		<td><attr><string/>width</attr></td>
		<td>
			列宽度
		</td>
	</tr>
	<tr>
		<td><attr><string/>align</attr></td>
		<td>
			该列单元格内文字靠左left/右right/中center,默认center
		</td>
	</tr>
	<tr>
		<td><attr><string/>event</attr></td>
		<td>
			带有此属性的单元格会被赋予点击事件,点击事件默认为打开编辑页
			<br/>可以通过实现joView.clickItem方法来重写点击事件
		</td>
	</tr>
	<tr>
		<td><attr><string/>headAlign</attr></td>
		<td>
			该列标题内文字靠左left/右right/中center,默认center
		</td>
	</tr>
	<tr>
		<td><attr><string/>order</attr></td>
		<td>
			列排序标识,加载表格数据时会将此属性值发送到后台,供后台排序使用
		</td>
	</tr>
</table>

<div class="eg">
	首先在页面加入表格：
	<pre name="code" class="brush:html;toolbar:false;">
        <table class="table table-bordered table-hover table-striped table-condensed" id="mainList" dataUrl="{URL_UMS}ums/app/getAppPage.action"
               deleteUrl="{URL_UMS}ums/app/deleteApp.action" formUrl="page/ums/appForm.jsp">
            <col field="name" title="应用系统名称" width="20%" align="" event="click"/>
            <col field="[=jo.formatTime({createTime})]" title="接入时间" width="15%" align=""/>
            <col field="[=jo.formatTime('{updateTime}')]" title="修改时间" width="15%" align=""/>
            <col field="urlIndex" title="首页地址" width="35%" align=""/>
            <col field="num" title="排序" width="10%" align=""/>
		</table>
	</pre>
	然后对其进行初始化：
	<pre name="code" class="brush:javascript;toolbar:false;">
		<script type="text/javascript">
			$(function(){
				joView.init({grid:$("#mainList"),PKName:"id"});//初始化页面
			});
		</script>
	</pre>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--帮助手册js-->
<script src="/static/js/help/document.js"></script>

<!--代码高亮-->
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shCore.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script class="javascript">
	highLight();
</script>
</body>
</html>
